iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
Software Development

三十天利用Angular與.net Core開發實戰一波系列 第 5

Day 5 AngularTri專案架構配置-Angular Material

  • 分享至 

  • xImage
  •  

Angular Material

前端UI component我選擇用Angular Material

首先要先安裝Angular Material

npm install --save @angular/material @angular/cdk @angular/animations

再來在app.moudle裡面import Angular Material的動畫

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

material中有一個可使用icon的功能需要再index.html link進來

index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

因為Angular Material要用哪個UI物件就要在app.module裡面import
EX:你想用Button就要import MatButtonModule,想用checkbox就要import MatCheckboxModule

所以我們利用Angular的特色來客製一個Angular material module,這點官網也有說到

ng g moudle angular-material

以下我舉例import了Buttton、Checkbox、Input、Icon、SnackBar

Angular-material.module.ts
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
//import Angular Material的動畫移到這邊即可
import { MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule, MatSnackBarModule } from '@angular/material';
@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule, MatSnackBarModule
  ],
  exports: [
    BrowserAnimationsModule,
    MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule, MatSnackBarModule
  ],
  declarations: []
})
export class AngularMaterialModule { }

最後要再style.scss裡面import進material的風格CSS

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

設定好後即可以開始撰寫前端畫面程式了

tri001.component.html
<mat-checkbox>Check me!</mat-checkbox>

 <mat-form-field>
    <input matInput placeholder="Favorite food" value="Vegetable">
  </mat-form-field>
  
  <button mat-fab color="warn" (click)="openSnackbar()">
  <span matTooltip="Add">
    <mat-icon>add</mat-icon>
  </span>
</button>

上一篇
Day 4 AngularTri專案架構配置- SCSS style配置
下一篇
Day 6 AngularTri專案架構配置-整合動一下
系列文
三十天利用Angular與.net Core開發實戰一波32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言